<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <script src="js/jq.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .log-top {
      width: 600px;
      height: 50px;

      background-color: #f1f1f1;
      display: flex;
    }

    .log-top li {
      line-height: 50px;
      text-align: center;
      width: 300px;
      height: 50px;
      list-style: none;
      font-size: 30px;
      color: white;
    }

    .log-main li {
      width: 600px;
      height: 400px;
      text-align: center;
      background-color: rgb(255, 255, 255);
      display: none;
    }

    .log-top-active {
      background-color: #31a4f6;
      color: white;
      box-sizing: border-box;


    }

    .log-main .log-main-active {
      display: block;
      box-sizing: border-box;
      padding-top: 10px;
      position: relative;
    }


    html,
    body {
      height: 100%;
    }

    .box-log {
      position: fixed;
      left: 0;
      top: 0;
      box-sizing: border-box;
      padding-top: 100px;
      width: 100%;
      height: 100%;
      background-color: #3f3f3f56;


    }

    .box-position {

      width: 600px;
      margin: 0 auto;
    }

    #w-99 {
      color: #9c9c9c;
    }

    .log-main .log-main-active h3 {
      margin-top: 60px;
      margin-bottom: 20px;
    }

    .login-qq {
      margin-top: 20px;

    }

    .s1 {
      position: absolute;
      left: 150px;
      top: 218px;
    }

    .s2 {
      position: absolute;
      left: 150px;
      top: 282px;
    }

    .login-qq input {
      width: 300px;
      height: 40px;
      outline: none;
      margin-bottom: 20px;
    }

    .login-qq input:last-child {
      background-color: #86ce2f;
      border: none;
      color: white;
      font-size: 18px;
    }

    .fool-text {
      position: absolute;
      right: 0;
      bottom: 10px;
    }

    .fool-text a {
      margin-right: 20px;
      text-decoration: none;
      color: #666666;
      position: relative;
    }

    .fool-text a:hover {
      text-decoration: underline;
    }

    .fool-text a::after {
      content: '';
      width: 1px;
      height: 16px;
      background-color: #666;
      position: absolute;
      right: -14px;
      top: 4px;
    }

    .fool-text .last::after {
      content: '';
      background-color: #fff;
    }

    .erweima img {
      width: 280px;
    }

    .log-main .erweima h3 {
      margin-top: 10px;
      margin-bottom: 0px;
    }
  </style>
</head>

<body>

  <div class="box-log">
    <div class="box-position">
      <ul class="log-top">
        <li class="log-top-active">QQ账号登录</li>
        <li id="w-99">微信账号登录</li>
      </ul>
      <ul class="log-main">
        <li class="log-main-active">
          <p>微信和QQ是两个独立账号，账号信息不互通</p>
          <h3>帐号密码登录</h3>
          <p>推荐使用快速安全登录，防止盗号。</p>
          <div class="login-qq">
            <input type="text" id="user" placeholder="账号"><span class="s1"></span><br>
            <input type="text" id="pawd" placeholder="密码"><span class="s2"></span><br>
            <input type="button" value="授权登录" id="btn">
          </div>
          <p class="fool-text">
            <a href="">忘记密码</a>
            <a href="register.html">注册新账号</a>
            <a href="" class="last">意见反馈</a>
          </p>
        </li>
        <li class="erweima">
          <p>微信和QQ是两个独立账号，账号信息不互通</p>
          <h3>帐号密码登录</h3>
          <p><img src="img/er.jpg" alt=""></p>
          <p>微信扫一扫</p>
          <p>“聚诚品”</p>
        </li>
      </ul>

    </div>
  </div>


  <script>

    

    $('.log-top li').click(function () {

      console.log($(this));
      console.log($(this).index());

      $(this).css({ color: 'white' }).siblings().css({ color: '#9c9c9c' })
      $(this).addClass('log-top-active').siblings().removeClass('log-top-active');
      $('.log-main li').eq($(this).index()).addClass('log-main-active').siblings().removeClass('log-main-active');
    })


    let user2 = localStorage.getItem("user");
    let pawd = localStorage.getItem("pawd");
    // console.log(user2);
    // console.log(pawd);
    $('#user').val(user2);
    $('#pawd').val(pawd);

    let isUsername = true;
    $('#user').blur(function () {
      let reg = /^[a-zA-Z]\w{5,17}$/;
      if (reg.test($('#user').val())) {
        $('#user').next().html('^_^');
        $('#user').next().css({ fontSize: '12px', color: 'green' });
        isUsername = true;

      } else {
        $('#user').next().html('账号必须以字母开头6-18个非空字符');
        $('#user').next().css({ fontSize: '12px', color: 'red' });
        isUsername = false;
      }
    })

    let isPassword = true;
    $('#pawd').blur(function () {
      let reg = /^\S{3,10}$/;
      if (reg.test($('#pawd').val())) {
        // $('#pawd').next().html('密码长度为3-10个非空字符');
        $('#pawd').next().html('^_^');
        $('#pawd').next().css({ fontSize: '12px', color: 'green' });
        isPassword = true;

      } else {
        $('#pawd').next().html('密码长度为3-10个非空字符');
        $('#pawd').next().css({ fontSize: '12px', color: 'red' });
        isPassword = false;

      }

    })


    $('#btn').click(function () {
      // console.log(isUsername);

      // console.log(isPassword);
      if (isPassword && isUsername) {
        console.log(4);
        let url = "http://jx.xuzhixiang.top/ap/api/login.php";
        $.get(url, { username: $('#user').val(), password: $('#pawd').val() }).then(function (res) {
          console.log(res);
          if (res.code == 1) {
            localStorage.setItem("uid", res.data.id);
            // document.cookie = "uid=1234";
            location.href = "index.html"


          }
        })
      }

    })

  </script>
</body>

</html>